<%@ page contentType="text/html; charset=utf-8"%>
<%@ include file="/WEB-INF/jsp/common/tags.jsp"%>

<aos:html title="前端管理" base="http" lib="ext">
<aos:body>
</aos:body>
</aos:html>


<aos:onready>
	<aos:viewport layout="border">
		<aos:gridpanel id="_g_info" url="frontService.listImgInfo"
			onrender="_g_info_query" region="center">
			<aos:docked forceBoder="1 0 1 0">
				<aos:dockeditem xtype="tbtext" text="首页图片" />
			</aos:docked>
			<aos:column type="rowno" />
			<aos:column header="用户编号" dataIndex="id" hidden="true" />
			<aos:column header="首页轮播图1" dataIndex="banner1" width="60" />
			<aos:column header="首页轮播图2" dataIndex="banner2" width="60" />
			<aos:column header="首页轮播图3" dataIndex="banner3" width="60" />
			<aos:column header="副轮播图1" dataIndex="sub_banner1" width="60" />
			<aos:column header="副轮播图2" dataIndex="sub_banner2" width="60" />
			<aos:column header="副轮播图3" dataIndex="sub_banner3" width="60" />
			<aos:column header="副轮播图4" dataIndex="sub_banner4" width="60" />
			<aos:column header="副轮播图5" dataIndex="sub_banner5" width="60" />
			<aos:column header="编辑" rendererFn="fn_button_render" align="center"
				fixedWidth="60" />
		</aos:gridpanel>

		<%-- 通过这个弹窗表单演示再查询一次DB加载数据的方法 --%>
		<aos:window id="_w_info" title="首页图片预览" onshow="_w_info_onshow">
			<aos:formpanel id="_f_info" width="400" layout="anchor"
				labelWidth="70">
				<aos:formpanel id="pic_add_">
						<aos:filefield name="uploadPic" id="uploadPic" star="true"	emptyText="请上传图片..." />
						<aos:dockeditem text="上传图片" icon="add2.png" onclick="do_upload" />
			    </aos:formpanel>
			    <aos:textfield name="uploaded_pic" fieldLabel="图片路径"  emptyText="请复制到对应的文本框" />
			    <aos:textfield name="id" fieldLabel="用户编号" readOnly="true" />
				<aos:textfield name="banner1" fieldLabel="首页轮播图1" />
				<aos:textfield name="banner2" fieldLabel="首页轮播图2" />
				<aos:textfield name="banner3" fieldLabel="首页轮播图3" />
				<aos:textfield name="sub_banner1" fieldLabel="副轮播图1" />
				<aos:textfield name="sub_banner2" fieldLabel="副轮播图2" />
				<aos:textfield name="sub_banner3" fieldLabel="副轮播图3" />
				<aos:textfield name="sub_banner4" fieldLabel="副轮播图4" />
				<aos:textfield name="sub_banner5" fieldLabel="副轮播图5" />
			</aos:formpanel>
			<aos:docked dock="bottom" ui="footer">
				<aos:dockeditem xtype="tbfill" />
				<aos:dockeditem onclick="updateImg" text="提交" icon="ok.png" />
				<aos:dockeditem onclick="#_w_info.hide();" text="关闭"
					icon="close.png" />
			</aos:docked>
		</aos:window>



	</aos:viewport>

	<script type="text/javascript">
		//加载表格数据
		function _g_info_query() {
			_g_info_store.loadPage(1);
		}
		
		//窗口弹出事件监听
		function _w_info_onshow() {
			var record = AOS.selectone(_g_info);
            AOS.ajax({
            	params : {
            		id: record.data.id
            	},
                url: 'frontService.getImgInfo',
                ok: function (data) {
                	_f_info.form.setValues(data);
                }
            });
		}
		
		
		//更新照片链接
		function updateImg() {
			AOS.ajax({
				forms : _f_info,
                url: 'frontService.updateImgInfo',
                ok: function (data) {
                	AOS.tip(data.appmsg);
					_g_info_store.reload();
					_w_info.hide();
                }
            });
		}
		
		
		
		//按钮列转换
		function fn_button_render(value, metaData, record, rowIndex, colIndex,
				store) {
			return '<input type="button" value="编辑" class="cbtn" onclick="_w_info_show();" />';
		}
		
		//上传图片
		function do_upload(){
			var form = pic_add_.getForm();
            form.submit({
               url: '/orisper/api/common/uploadPic.jhtml',
               success: function(form, action) {
            	   if(action.result.appcode == '-1'){
                		AOS.tip(action.result.appmsg);
                	}else{
                		AOS.tip(action.result.appmsg); 
                		AOS.setValue('_f_info.uploaded_pic', action.result.url);
                	}
               },
               failure: function(form, action) {
            	   AOS.tip("上传失败！");
               }
               
			}); 
		}
		
		
		
		
		
	</script>
</aos:onready>

<script type="text/javascript">

	//显示编辑窗口
	function _w_info_show(){
		Ext.getCmp('_w_info').show();
	}
	
	
</script>